<template>
  <div id="drainage_ctn" class="drainage_ctn">
    <!-- <p class="data_time"><span>数据更新时间</span><span style="color: #888">{{ timestamp(time, "Y-M-D h:m:s") }}</span></p> -->
    <category_industry v-model="industryItemObj"/>
    <section class="drainage_ctn_type">
      <time_options v-model="value03" :radio_values="['日榜', '周榜', '月榜']" :timing="$global.timing"/>
      <section class="input_group">
        <input
          type="text"
          v-model="input01"
          placeholder="请输入直播间名称在排行榜中搜索"
          @keyup.enter="search_input()"
        />
        <div @click="search_input()">
          <!-- <img src="@/assets/meng/search01.png" /> -->
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage">
          <span></span>分享
        </button>
        <button @click="export_data">
          <span></span>导出
        </button>
      </div>
    </section>
    <ul
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
    >
      <li tc>排名</li>
      <li tc tl pr>直播间</li>
      <li tc>达人</li>
      <li tc :style="{ cursor: sortValue == 1 ? 'text' : 'pointer' }" @click="sort_fun(false, 1)">
        直播时长
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderType == 'desc' && sortValue == 1"
          class="sort"
        />
        <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
      </li>
      <li tc :style="{ cursor: sortValue == 2 ? 'text' : 'pointer' }" @click="sort_fun(false, 2)">
        视频引流占比
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderType == 'desc' && sortValue == 2"
          class="sort"
        />
        <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
      </li>

      <li tc :style="{ cursor: sortValue == 3 ? 'text' : 'pointer' }" @click="sort_fun(false, 3)">
        视频引流人数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderType == 'desc' && sortValue == 3"
          class="sort"
        />
        <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
      </li>
      <li tc :style="{ cursor: sortValue == 4 ? 'text' : 'pointer' }" @click="sort_fun(false, 4)">
        引流视频数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderType == 'desc' && sortValue == 4"
          class="sort"
        />
        <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
      </li>
      <li tc>操作</li>
    </ul>
    <table class="table table01" ref="tableEl">
      <thead :class="{ is_fixed: isFixed }" ref="th_tr_El">
        <tr>
          <th>排名</th>
          <th>直播间</th>
          <th>达人</th>
          <th :style="{ cursor: sortValue == 1 ? 'text' : 'pointer' }" @click="sort_fun(false, 1)">
            直播时长
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 1"
              class="sort m_l"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort m_l" />
          </th>
          <th :style="{ cursor: sortValue == 2 ? 'text' : 'pointer' }" @click="sort_fun(false, 2)">
            视频引流占比
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 2"
              class="sort m_l"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort m_l" />
          </th>
          <th :style="{ cursor: sortValue == 3 ? 'text' : 'pointer' }" @click="sort_fun(false, 3)">
            视频引流人数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 3"
              class="sort m_l"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort m_l" />
          </th>
          <th :style="{ cursor: sortValue == 4 ? 'text' : 'pointer' }" @click="sort_fun(false, 4)">
            引流视频数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 4"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="table_data01 && table_data01.length && !loading">
        <tr v-for="(item, index) in table_data01" :key="'table' + index" :id="!index ? 'tr1' : ''">
          <td class="td td_01">{{ item.rowid }}</td>
          <td class="td td_02">
            <div style="justify-content: flex-start">
              <img
                :src="item.logo"
                class="pointer"
                @click="go_to_page01(item.roomId)"
                v-errorImg:live
              />
              <section>
                <div>
                  <!-- <img
                    v-if="item.isShop == 1"
                    class="img01"
                    src="@/assets/meng/search_result01.png"
                  />-->
                  <span
                    class="dot pointer hover"
                    @click="go_to_page01(item.roomId)"
                  >{{ item.roomTitle }}</span>
                  <!-- <img
                    v-if="item.verifyType == 1"
                    src="@/assets/meng/search_result02.png"
                  />
                  <img
                    v-if="item.VerifyType == 2"
                    src="@/assets/meng/search_result03.png"
                  />-->
                </div>
                <div class="section-img" v-if="item.category">{{ item.category }}</div>
              </section>
            </div>
          </td>
          <td class="td td_03">
            <div>
              <p class="pointer hover" @click="go_to_page03(item.authorId)">{{ item.nickName }}</p>
            </div>
          </td>
          <td class="td td_04">
            <div>{{ item.durationOfLiveBroadcast }}</div>
          </td>
          <td class="td td_05">
            <div>
              {{
              item.videoSourceProportion
              ? (item.videoSourceProportion * 100).toFixed(0)
              : 0
              }}%
            </div>
          </td>
          <td class="td td_06">
            <div>{{ format_num(item.videoDrainageQuantity) }}</div>
          </td>
          <td class="td td_07">
            <div>{{ item.sourceVideoNumber ? item.sourceVideoNumber : "--" }}</div>
          </td>
          <td class="td td_08">
            <!-- <div>
              <span class="span01">{{ format_num(item.liveCount) }} </span
              ><span class="span03"> |</span
              ><span
                class="span02"
                @click="
                  author_id = item.authorId;
                  showPopup = true;
                "
                >查看</span
              >
            </div>-->
            <div class="details" @click="LiveDetailsData(item)">视频引流详情</div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="upgradeBox" v-if="!permissions">
      <RankUpgrade class="rankUpgrade" />
    </div>
    <!-- <div class="upgradeBox" v-if="permissions && !loading &&vipLevel==0">
      <RankUpgrade class="rankUpgrade" />
    </div> -->
    <div class="empty" v-show="table_data01 && table_data01.length == 0 && !loading && permissions">
      <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
    <div class="pageBox" v-if="!loading">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="totalCount"
        :page-size="count"
        :current-page="page"
        @current-change="get_data"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>

    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="showPopup" width="1291px" top="20vh" class="dialog">
      <section class="header">
        <div class="header-box">
          <img
            class="header-box-img"
            :src="response && response.logo"
            @click="go_to_page03(itemRoom.authorId)"
          />
        </div>
        <div>
          <p class="dot hover pointer" @click="go_to_page03(itemRoom.authorId)">
            {{ response && response.nickName }}
            <img
              v-if="false"
              src="@/assets/meng/search_result02.png"
            />
            <img v-if="false" src="@/assets/meng/search_result03.png" />
          </p>
          <div class="header-cd" v-if="response.category">{{ response.category }}</div>
        </div>
      </section>
      <!-- <p class="count">
        共<span>{{ response && response.totalCount }}</span
        >场直播
      </p>-->
      <table class="table table02">
        <thead>
          <tr>
            <th>排名</th>
            <th class="tr_nth2">视频</th>
            <th>引流占比</th>
            <th>引流人数</th>
            <!-- <th>点赞增量</th> -->
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in response && response.lives" :key="'table01' + index">
            <td class="td td_03">{{ item.rowid }}</td>
            <td class="td td_01">
              <div>
                <img :src="item.thumPic" class="pointer" @click="go_to_page02(item.awemeId)" />
                <section>
                  <div>
                    <span
                      class="dot pointer hover"
                      @click="go_to_page02(item.awemeId)"
                    >{{ item.title }}</span>
                    <!-- <img v-if="false" src="../../../assets/meng/pop01.png" />
                    <img v-if="false" src="../../../assets/meng/pop02.png" />-->
                  </div>
                </section>
              </div>
            </td>
            <td class="td td_03">
              <div>{{ item.proportion }}</div>
            </td>
            <td class="td td_04">
              <div>{{ item.numberOfPeople }}</div>
            </td>
            <!-- <td class="td td_05">
              <div>{{ item.favoriteIncrement }}</div>
            </td>-->
            <td class="td td_07">
              <button @click="go_to_page02(item.awemeId)">视频详情</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pageBox" v-if="response && response.lives.length != 0">
        <!-- 分页 -->
        <el-pagination
          background
          :page-size="this.detailSize"
          layout="prev, pager, next"
          :total="detailCount"
          :current-page.sync="detailPage"
          :hide-on-single-page="true"
          @current-change="changeDetailIndex"
        ></el-pagination>
      </div>
      <!-- no_data -->
      <div class="empty" v-if="!detailLoading && response.lives.length == 0">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
      <!-- loading -->
      <div
        v-loading="detailLoading"
        v-if="detailLoading"
        class="detail_loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </el-dialog>
    <!-- 升级会员 -->
  </div>
</template>

<script>
// import html2canvas from 'html2canvas'
import { data, data02 } from '../data.js';
import html2canvas from 'html2canvas';
import RankUpgrade from '@/component/rankUpgrade.vue';
import category_industry from '@/component/category_industry';
export default {
  name: 'DrainageCtn',
  components: { RankUpgrade,category_industry },
  data() {
    return {
      showScroll: 260, //Y轴滚动位置
      // 排序
      orderType: 'desc',
      noCursor: true,
      sortValue: 3,
      // 控制页面展示的数据
      loading: false, //loading true是加载中 false是加载完毕
      showPopup: false, //展示引流详情组件
      isFixed: false, //控制显示吸顶样式
      showLeft: true, //判断左侧导航栏是否显示

      // 页面数据
      table_data01: data,
      response: {
        lives: []
      },
      time: '623467897',
      totalCount: 0, //返回的总条数
      // 接口传参
      total: 100,
      count: 30,
      page: 1,
      currentPage: 1,
      // 关于form表单的数据
      input01: '',
      value03: '日榜',
      // 详情的接口传参
      detailPage: 1,
      detailSize: 5,
      detailCount: 0,
      detailLoading: false, //detailLoading true是加载中 false是加载完毕
      detailRoomId: '',
      itemRoom: '',
      permissions: 1,
      vipLevel: '',
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },
  props: {},
  computed: {
    listen_change() {
      const { industryItemObj, value02, value03 } = this;
      return {
        industryItemObj,
        value02,
        value03
      };
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //会员级别
    // this.get_data() 因为time_options组件内部已经提交新值，导致v-model的值更改，所以已经执行请求函数
    this.$watch(
      'listen_change',
      this.debounce((newValue, oldValue) => {
        this.sortValue = 3;
        this.page = 1;
        this.table_data01 = [];
        this.get_data();
      }, 0)
    );
    document.title = '直播引流榜-直播电商数据分析&智能分析服务平台-掌上精选；';
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  watch: {
    // 搜索为空时榜单自动刷新
    input01: function (newVal, oldVal) {
      if (newVal == '') {
        this.table_data01 = [];
        this.page = 1;
        this.get_data();
      }
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    },
    showCondition(old, newOld) {
      if (newOld) {
        this.showScroll = 294;
      } else {
        this.showScroll = 450;
      }
    }
  },
  methods: {
    go_to_page03(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}`
      });
      window.open(router.href, '_blank');
    },
    // 获取页面数据
    get_data(a) {
      this.page = a;
      let that = this;
      this.loading = true;
      this.permissions = 1;
      // console.log(that.value03)
      // let WhereList
      // if(that.value03.indexOf("日榜") !== -1){
      //   WhereList = 1
      // }else if(that.value03.indexOf("周榜") !== -1){
      //   WhereList = 2
      // }else if(that.value03.indexOf("月榜") !== -1){
      //   WhereList = 3
      // }else {
      //   WhereList = that.value03.split("?")[1]
      // }
      let page = 1;
      if (a) {
        that.page = a;
        // 回到顶部
        that.backTop();
      }
      this.$axios
        .post('/api/Live/GetVideoDrainageRankingList', {
          DateTime: that.value03.split('?')[1],
          Top: this.total,
          Search: this.input01,
          CategoryId: this.industryItemObj.id,
          PageIndex: this.page,
          PageSize: this.count,
          OrderByIndex: that.sortValue,
          SortOrder: that.orderType
        })
        .then(res => {
          this.permissions = 1;
          this.loading = false;
          if (res.data.code1 == 1013||res.data.code == 1003||res.data.code ==1013) {
            this.table_data01 = [];
            this.permissions = 0;
          }
          if (res.data.code == 0) {
            this.table_data01 = res.data.data.list;
            this.totalCount = res.data.data.pageInfo.totalCount;
            this.setTBBar();
          }
        });
    },
    //获取引流榜详情的数据
    LiveDetailsData(e) {
      this.itemRoom = e;
      // 数据赋值
      this.detailPage = 1;
      this.showPopup = true;
      this.response.logo = e.logo;
      this.response.nickName = e.nickName;
      this.response.category = e.category;

      // 房间id
      this.detailRoomId = e.roomId;
      this.getDetailData();
    },
    getDetailData() {
      this.detailLoading = true;
      this.response.lives = [];
      this.$axios
        .post('api/Aweme/GetVideoDrainageRankingAwemePageList', {
          RoomId: this.detailRoomId,
          PageIndex: this.detailPage, //分页索引
          PageSize: this.detailSize, //分页大小
          SortOrder: '1' //排序(0升序1降序)
        })
        .then(res => {
          this.detailLoading = false;
          if (res.data.code == 0) {
            this.response.lives = res.data.data.list;
            this.detailCount = res.data.data.pageInfo.totalCount;
          }
        });
    },
    changeDetailIndex(e) {
      this.detailPage = e;
      this.getDetailData();
    },
    // 排序
    sort_fun(parm01, parm02) {
      // console.log(parm02)
      if (parm01) {
        this.orderType = 'asc';
      } else {
        this.orderType = 'desc';
      }
      if (this.sortValue == parm02) {
        this.noCursor = false;
      } else {
        this.sortValue = parm02;
        this.dataList = [];
        this.page = 1;
        this.get_data();
      }
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    search_input() {
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    go_to_page02(id) {
      console.log(id);
      let router = this.$router.resolve({
        path: '/talent_main/videoDetails',
        query: { id }
      });
      window.open(router.href, '_blank');
      // let router = this.$router.resolve({
      //   path: `/talent_main/liveDetailsRoot/${id}/0`,
      // });
      // window.open(router.href, "_blank");
    },
    // 回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > this.showScroll ? true : false;
    },
    generatorImage() {
      var that = this;
      this.screenshot = false;
      this.$nextTick(() => {
        const loading = this.$loading({
          lock: true,
          text: '导出中...',
          spinner: 'el-icon-loading',
          customClass: 'customClass'
        });
        var shareContent;
        shareContent = this.$refs.tableEl; //需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement('canvas'); //创建一个canvas节点
        //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
        var scale = 1;
        canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale * scale; //定义canvas高度 *缩放
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
        var opts = {
          dpi: window.devicePixelRatio,
          scale: scale, // 添加的scale 参数
          useCORS: true,
          canvas: canvas, //自定义 canvas
          logging: true //日志开关
        };
        html2canvas(shareContent, opts).then(canvas => {
          let str;
          str = `《直播引流榜-${that.value03.split('?')[1]}》.png`;
          canvas.toBlob(
            function (blob) {
              const eleLink = document.createElement('a');
              eleLink.download = str;
              eleLink.style.display = 'none';
              // 字符内容转变成blob地址
              eleLink.href = URL.createObjectURL(blob);
              // 触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
            },
            'image/png',
            1
          );
          loading.close();
          that.screenshot = true;
        });
      });
    },
    export_data() {
      let that = this;
      let str = `排名,直播间,达人,直播时长,视频引流占比,引流视频人数,引流视频数\n`;
      for (let i = 0; i < that.table_data01.length; i++) {
        str += `${that.table_data01[i].rowid}\,${that.table_data01[i].roomTitle},${
          that.table_data01[i].nickName
        }\,${that.table_data01[i].durationOfLiveBroadcast},${that.formatRate(
          Math.abs(that.table_data01[i].videoSourceProportion, 2)
        )},${that.format_num(that.table_data01[i].videoDrainageQuantity)},${
          that.table_data01[i].sourceVideoNumber
        }\n`;
      }
      var blob = new Blob([str], { type: 'text/plain;charset=utf-8' }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = object_url;
      let str_name = `《直播引流榜-${that.value03.split('?')[1]}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight);
  }
};
</script>

<style scoped lang="less">
.drainage_ctn {
  min-height: 100vh;
  margin-top: 10px;
  padding: 20px;
  //   padding-top: 18px;
  background-color: #fff;
  box-sizing: border-box;
}
.drainage_ctn_type {
  margin-bottom: 14px;
  > div {
    display: inline-block;
  }
  .input_group {
    display: inline-block;
    margin-left: 11px;
    position: relative;
    width: 308px;
    height: 32px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      vertical-align: -1px;
      background-color: #fff;
      height: 100%;
      box-sizing: border-box;
      padding-left: 11px;
      padding-right: 38px;
      border: none;
      color: #222;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }

    div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 0px;
      text-align: center;
      width: 38px;
      height: 30px;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('../../../../assets/wang/talentCompare/search-nohover.png') no-repeat 12px 7px,
        #fff;
      background-size: 15px 15px;
      img {
        width: 15px;
      }
    }
    > div:hover {
      background: url('../../../../assets/wang/talentCompare/search.png') no-repeat 12px 7px, #fff;
      background-size: 15px 15px;
    }
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../../assets/zhao/fenx.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url('../../../../assets/zhao/fenx_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url('../../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  /deep/.radio_item {
    margin-left: 0 !important;
    border-radius: 0 0 0 0 !important;
  }
  /deep/.radio_item:first-child {
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
  }
  /deep/.radio_item:last-child {
    border-radius: 0 4px 4px 0 !important;
    border-left: none !important;
  }
}
#drainage_ctn {
  .table01 {
    thead {
      tr {
        > th:nth-child(2) {
          text-align: left;
        }
        img {
          width: 5px;
          height: 10px;
          vertical-align: initial;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
      }
    }
    .td_08 {
      width: 10%;
      //   display: flex;
      //   justify-content: center;
      .details {
        width: 100px;
        height: 32px;

        text-align: center;
        background-color: transparent;
        border-radius: 4px;
        border: 1px solid #fd7f2c;
        font-size: 14px;
        color: #fd7f2c;
        margin: 0 auto;
        cursor: pointer;
      }
      .details:hover {
        border-color: #ff924b;
        color: #ff924b;
      }
    }
    .td_07 {
      width: 14%;
      font-size: 14px;
      color: #222222;
      .div_dot {
        height: auto !important;
        -webkit-line-clamp: 3;

        -webkit-box-orient: vertical;
        overflow: hidden !important;
      }
    }
    .td_01,
    .td_06,
    .td_05,
    .td_04 {
      font-family: DINAlternate-Bold;
      font-size: 15px;
      text-align: center;
    }

    .td_01 {
      width: 7%;
    }
    .td_03 {
      font-size: 14px;
      color: #222;
      white-space: nowrap; /*控制单行显示*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏的字符用省略号表示*/
      div {
        p {
          width: 140px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
        }
      }
    }
    .td_04,
    .td_05,
    .td_06,
    .td_07 {
      width: 12%;
    }
    .td_02 {
      width: 20%;

      > div {
        section {
          width: 100%;
          // width: 210px;
          > div:first-child {
            width: 220px;
            display: flex;
            align-items: center;
            > span {
              max-width: 100%;
              width: auto;
              word-break: break-all;
              font-size: 14px;
              font-weight: 600;
              color: #222222;
              margin-bottom: 5px;
            }
            > span:hover {
              color: #fd7f2c;
            }
            .img01 {
              margin-right: 6px;
              margin-left: 0;
              margin-top: -5px;
            }
            img {
              margin-top: -3px;
              width: 16px;
              height: 16px;
              margin-left: 6px;
            }
          }
          .section-img {
            display: inline-block;
            padding: 3px 9px;
            border-radius: 13px;
            color: #fd7f2c;
            border: 1px solid #fd7f2c;
            box-sizing: border-box;
            font-size: 14px;
          }
        }
        > img {
          border-radius: 6px;
          width: 50px;
          height: 50px;
          margin-right: 12px;
          //   border: 1px solid #e5e5e5;
          //   box-sizing: border-box;
        }
      }
    }
    .td {
      > div {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .dialog {
    /deep/.el-dialog__body {
      padding: 30px;
    }
    .page {
      padding-top: 30px;
      text-align: right;
      > p {
        font-size: 14px;
        color: #b5b5b5;
        text-align: center;
      }
      > div {
        margin-right: -10px;
      }
    }
    .detail_loading {
      height: 300px;
    }
    .table02 {
      margin-top: 14px;
      width: 100%;
      // thead {
      //   tr {
      //     > th:nth-child(1) {
      //       text-align: left;
      //       padding-left: 30px;
      //     }
      //   }
      // }
      .tr_nth2 {
        text-align: left;
        padding-left: 30px;
      }
      tbody {
        tr {
          height: 78px;
        }
      }
      .td_07 {
        text-align: center;

        button {
          width: 88px;
          height: 32px;
          text-align: center;
          background-color: transparent;
          border-radius: 4px;
          border: 1px solid #fd7f2c;
          font-size: 14px;
          color: #fd7f2c;
          margin: 0 auto;
          cursor: pointer;
        }
        button:hover {
          border-color: #ff924b;
          color: #ff924b;
        }
      }

      .td_02,
      .td_05,
      .td_06,
      .td_03,
      .td_04 {
        font-family: DINAlternate-Bold;
        font-size: 15px;
        text-align: center;
        color: 222;
      }

      .td_01 {
        width: 330px;
        > div {
          section {
            width: 210px;
            > div:first-child {
              display: flex;
              align-items: center;
              > span {
                max-width: 100%;
                width: auto;
                word-break: break-all;
                font-size: 14px;

                color: #222222;
                margin-bottom: 5px;
              }
              > span:hover {
                color: #fd7f2c;
              }
              img {
                height: 16px;
                margin-left: 6px;
              }
            }
            > div:last-child {
              width: 100%;
              word-break: break-all;
              font-size: 14px;
              color: #555555;
            }
          }
          > img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            margin-right: 12px;
            border: 1px solid #e5e5e5;
          }
        }
      }

      .td {
        > div {
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .count {
      margin-top: 46px;
      margin-bottom: 14px;
      color: #888888;
      font-size: 14px;
      span {
        color: #1779ff;
      }
    }
    .header {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .header-box {
        position: relative;
        .header-box-img {
          width: 50px;
          height: 50px;
          box-sizing: border-box;
          margin-right: 15px;
          border-radius: 4px;
          cursor: pointer;
          // border: 2px solid #ff295d;
        }
      }
      > div:last-child {
        flex: 1;
        height: 57px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        > p:nth-child(1) {
          font-size: 14px;
          font-weight: 600;
          color: #222222;
          width: 200px;
          > img {
            width: 16px;
            margin-left: 4px;
            vertical-align: -2px;
          }
        }
        > p:nth-child(1):hover {
          color: #fd7f2c;
        }
        .header-cd {
          width: 76px;
          height: 26px;
          line-height: 26px;
          text-align: center;

          border-radius: 13px;
          color: #fd7f2c;
          border: 1px solid #fd7f2c;
          font-size: 14px;
          margin-top: 7px;
        }
      }
    }
  }
}
.p-l {
  padding-left: 30px;
}
.c-222 {
  color: #222;
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 222;
  font-size: 0;

  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    img {
      width: 5px;
      height: 10px;
      vertical-align: baseline;
    }
  }
  &.isShow {
    display: block;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
[pl] {
  padding-left: 63px;
}
[pr] {
  padding-right: 30px;
}
.hover:hover {
  color: #fd7f2c;
}
// 升级会员
.upgradeBox {
  min-height: 60vh;
  position: relative;
  .rankUpgrade {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
